قانون @extend در CSS: تسلط بر الگوهای وراثت و توسعه استایل

قانون @extend در CSS ابزاری قدرتمند برای ترویج استفاده مجدد از کد و حفظ ثبات در شیوه‌نامه‌های شماست. اگرچه این قانون اغلب با پیش‌پردازنده‌های CSS مانند Sass و Less مرتبط است، درک اصول بنیادین آن برای نوشتن CSS کارآمد و قابل نگهداری، صرف‌نظر از ابزارهایی که استفاده می‌کنید، حیاتی است. این راهنمای جامع به بررسی عمیق قانون @extend، شامل سینتکس، مزایا، معایب و بهترین شیوه‌های آن می‌پردازد.

قانون @extend در CSS چیست؟

قانون @extend به شما این امکان را می‌دهد که استایل‌های یک انتخابگر CSS را در دیگری به ارث ببرید. در اصل، این روشی است برای اینکه به مرورگر بگویید: «تمام استایل‌های تعریف‌شده برای انتخابگر A را به انتخابگر B نیز اعمال کن.» این کار می‌تواند به طور قابل توجهی افزونگی در CSS شما را کاهش داده و به‌روزرسانی استایل‌ها در سراسر پروژه را آسان‌تر کند.

در حالی که CSS بومی معادل مستقیمی برای @extend ندارد، پیش‌پردازنده‌هایی مانند Sass و Less این ویژگی را فراهم می‌کنند و آن را به CSS استاندارد تبدیل (transpile) می‌کنند. با این حال، مفاهیم وراثت و توسعه استایل، حتی بدون اتکا به پیاده‌سازی خاصی از @extend، برای معماری خوب CSS اساسی هستند.

سینتکس و کاربرد پایه

سینتکس دقیق قانون @extend بسته به پیش‌پردازنده CSS که استفاده می‌کنید، کمی متفاوت است. با این حال، اصل اساسی یکسان باقی می‌ماند:

سینتکس Sass

در Sass، قانون @extend به این صورت استفاده می‌شود:

            .message {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

.success-message {
  @extend .message;
  color: green;
}

.error-message {
  @extend .message;
  color: red;
}

            

              
                Copy
              
            
          

در این مثال، .success-message و .error-message تمام استایل‌های تعریف‌شده برای .message را به ارث می‌برند و سپس استایل‌های خاص خود را (به ترتیب color: green; و color: red;) اعمال می‌کنند.

سینتکس Less

در Less، قانون @extend به طور مشابه استفاده می‌شود:

            .message {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

.success-message {
  &:extend(.message);
  color: green;
}

.error-message {
  &:extend(.message);
  color: red;
}

            

              
                Copy
              
            
          

به سینتکس &:extend(.message) در Less توجه کنید. علامت & به انتخابگر فعلی اشاره دارد.

خروجی CSS کامپایل‌شده

پس از اینکه پیش‌پردازنده کد بالا را کامپایل کرد (در اینجا مثال Sass نشان داده شده است)، CSS حاصل ممکن است چیزی شبیه به این باشد:

            .message, .success-message, .error-message {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

.success-message {
  color: green;
}

.error-message {
  color: red;
}

            

              
                Copy
              
            
          

توجه کنید که چگونه پیش‌پردازنده انتخابگرهایی که .message را توسعه می‌دهند، در یک قانون CSS واحد ترکیب می‌کند. این یکی از مزایای کلیدی @extend است: از تکرار ویژگی‌های CSS در خروجی شما جلوگیری می‌کند.

مزایای استفاده از @extend

• کاهش تکرار کد: مزیت اصلی @extend این است که میزان کدهای تکراری CSS را کاهش می‌دهد. این باعث می‌شود شیوه‌نامه‌های شما کوچک‌تر، خواناتر و نگهداری آن‌ها آسان‌تر شود.
• بهبود قابلیت نگهداری: وقتی نیاز به تغییر یک استایل مشترک دارید، فقط کافی است آن را در یک مکان تغییر دهید. تغییرات به طور خودکار در تمام انتخابگرهایی که آن استایل را توسعه می‌دهند، منعکس خواهد شد. تصور کنید که استایل دکمه را در یک سایت بزرگ تجارت الکترونیک به‌روز می‌کنید – @extend می‌تواند این فرآیند را بسیار ساده کند.
• افزایش ثبات: @extend به اطمینان از ثبات استایل‌های شما در سراسر پروژه کمک می‌کند. این امر به ویژه برای پروژه‌های بزرگ با چندین توسعه‌دهنده مهم است.
• روابط معنایی: استفاده از @extend می‌تواند روابط بین عناصر مختلف در طراحی شما را روشن کند. این به صراحت بیان می‌کند که یک عنصر، یک تغییر یا توسعه از عنصر دیگری است.

معایب و ملاحظات احتمالی

در حالی که @extend مزایای متعددی دارد، ضروری است که از معایب بالقوه آن آگاه باشید و از آن با احتیاط استفاده کنید:

• افزایش Specificity: @extend گاهی اوقات می‌تواند منجر به مشکلات غیرمنتظره Specificity (ویژگی) شود، به خصوص هنگام کار با سلسله‌مراتب پیچیده انتخابگرها. درک Specificity در CSS هنگام استفاده از @extend بسیار مهم است.
• اندازه CSS کامپایل‌شده: در حالی که @extend تکرار کد را در فایل‌های منبع شما کاهش می‌دهد، گاهی اوقات می‌تواند منجر به فایل‌های CSS کامپایل‌شده بزرگ‌تر شود، به خصوص اگر انتخابگرهای زیادی یک استایل پایه را توسعه دهند. تأثیر کلی بر اندازه فایل و زمان بارگذاری صفحه را در نظر بگیرید.
• چالش‌های نگهداری: استفاده بیش از حد از @extend یا استفاده نامناسب از آن می‌تواند درک و نگهداری شیوه‌نامه‌های شما را دشوارتر کند. مهم است که از آن به صورت استراتژیک استفاده کنید و کد خود را به وضوح مستند کنید.
• جنگ‌های Specificity: اگر کلاسی را که از قبل بسیار خاص است (مثلاً #header .nav li a.active) توسعه دهید، انتخابگر حاصل می‌تواند به طور غیرضروری پیچیده و بازنویسی آن دشوار شود. این می‌تواند منجر به «جنگ‌های Specificity» شود که در آن مجبور می‌شوید انتخابگرهای خاص‌تری را فقط برای رسیدن به استایل مورد نظر اضافه کنید.

بهترین شیوه‌ها برای استفاده از @extend

برای به حداکثر رساندن مزایای @extend و به حداقل رساندن معایب بالقوه آن، این بهترین شیوه‌ها را دنبال کنید:

۱. از @extend برای روابط معنایی استفاده کنید

از @extend در درجه اول زمانی استفاده کنید که یک رابطه معنایی واضح بین انتخابگرها وجود داشته باشد. به عنوان مثال، توسعه یک استایل پایه دکمه برای انواع مختلف دکمه (مانند دکمه اصلی، دکمه ثانویه) منطقی است. از استفاده از @extend صرفاً به خاطر استفاده مجدد از کد خودداری کنید؛ اگر ارتباط منطقی وجود ندارد، به جای آن از mixinها (که بعداً مورد بحث قرار می‌گیرند) استفاده کنید.

۲. از توسعه دادن انتخابگرهای فرزند (Descendant) خودداری کنید

توسعه انتخابگرهای فرزند (مثلاً .container .item) می‌تواند منجر به CSS بیش از حد خاص و شکننده شود. به طور کلی بهتر است کلاس‌های پایه را مستقیماً توسعه دهید.

۳. به Specificity (ویژگی) توجه کنید

به Specificity انتخابگرهایی که توسعه می‌دهید، دقت زیادی داشته باشید. از توسعه انتخابگرهایی با Specificity بالا خودداری کنید مگر اینکه کاملاً ضروری باشد. برای مدیریت استایل‌های مشترک بدون افزایش غیرضروری Specificity، استفاده از کلاس‌های کاربردی (utility classes) (که بعداً مورد بحث قرار می‌گیرند) را در نظر بگیرید.

۴. کد خود را مستند کنید

استفاده از @extend را در کامنت‌های CSS خود به وضوح مستند کنید. رابطه بین انتخابگرها و دلیل استفاده از @extend را توضیح دهید. این به توسعه‌دهندگان دیگر کمک می‌کند تا کد شما را درک کنند و از ایجاد تغییرات ناخواسته جلوگیری کنند.

۵. به طور کامل تست کنید

پس از ایجاد تغییراتی در CSS خود که شامل @extend است، وب‌سایت یا برنامه خود را به طور کامل تست کنید تا مطمئن شوید که استایل‌ها به درستی اعمال شده‌اند و هیچ عارضه جانبی غیرمنتظره‌ای وجود ندارد.

۶. استفاده از انتخابگرهای Placeholder را در نظر بگیرید (فقط در Sass)

Sass ویژگی به نام انتخابگرهای placeholder (مثلاً %message) را ارائه می‌دهد. این‌ها انتخابگرهای خاصی هستند که فقط در صورتی در CSS کامپایل‌شده گنجانده می‌شوند که توسعه داده شوند. این می‌تواند برای تعریف استایل‌های پایه‌ای که فقط می‌خواهید در صورت نیاز واقعی گنجانده شوند، مفید باشد. انتخابگرهای Placeholder به جلوگیری از تولید قوانین CSS غیرضروری کمک می‌کنند. آنها با علامت درصد (%) به جای نقطه (.) یا هشتگ (#) اعلام می‌شوند.

            %message {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

.success-message {
  @extend %message;
  color: green;
}

.error-message {
  @extend %message;
  color: red;
}

            

              
                Copy
              
            
          

۷. تودرتو کردن با @extend را محدود کنید

توسعه انتخابگرها در قوانین عمیقاً تودرتو می‌تواند خواندن و اشکال‌زدایی CSS شما را دشوارتر کند. در صورت امکان، از تودرتو کردن قوانین @extend خودداری کنید یا CSS خود را برای کاهش سطوح تودرتو بازنویسی کنید.

۸. از پشتیبانی مرورگرها آگاه باشید

در حالی که قابلیت @extend توسط پیش‌پردازنده‌های CSS ارائه می‌شود، CSS کامپایل‌شده، CSS استاندارد است و توسط همه مرورگرهای مدرن پشتیبانی می‌شود. با این حال، اگر با مرورگرهای قدیمی‌تر کار می‌کنید، ممکن است نیاز به استفاده از یک polyfill یا راه‌حل جایگزین داشته باشید تا اطمینان حاصل کنید که استایل‌های شما به درستی نمایش داده می‌شوند.

جایگزین‌های @extend

در حالی که @extend می‌تواند ابزار مفیدی باشد، همیشه بهترین راه‌حل نیست. در اینجا چند جایگزین برای بررسی وجود دارد:

۱. Mixinها

Mixinها بلوک‌های قابل استفاده مجدد از کد CSS هستند که می‌توانند در چندین انتخابگر گنجانده شوند. آنها شبیه توابع در زبان‌های برنامه‌نویسی هستند. Mixinها جایگزین خوبی برای @extend هستند زمانی که نیاز به گنجاندن مجموعه‌ای از استایل‌ها در چندین انتخابگر دارید، اما رابطه معنایی واضحی بین آنها وجود ندارد.

در اینجا مثالی از یک mixin در Sass آمده است:

            @mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

.card {
  @include border-radius(10px);
}

            

              
                Copy
              
            
          

۲. کلاس‌های کاربردی (Utility Classes)

کلاس‌های کاربردی، کلاس‌های CSS کوچک و تک منظوره هستند که می‌توانند برای اعمال استایل‌های خاص به عناصر استفاده شوند. آنها اغلب برای مدیریت فاصله‌گذاری، تایپوگرافی و سایر استایل‌های مشترک استفاده می‌شوند. کلاس‌های کاربردی جایگزین خوبی برای @extend هستند زمانی که نیاز به اعمال یک استایل به چندین عنصر دارید، اما نمی‌خواهید یک رابطه معنایی بین آنها ایجاد کنید.

نمونه‌هایی از کلاس‌های کاربردی ممکن است شامل .margin-top-10، .padding-20 یا .text-center باشند. فریمورک‌هایی مانند Tailwind CSS به شدت از کلاس‌های کاربردی استفاده می‌کنند.

۳. CSS شیءگرا (OOCSS)

CSS شیءگرا (OOCSS) یک متدولوژی معماری CSS است که بر جداسازی ساختار و ظاهر تأکید دارد. این شما را تشویق می‌کند تا اشیاء CSS قابل استفاده مجدد ایجاد کنید که می‌توانند برای ایجاد طرح‌بندی‌ها و طراحی‌های پیچیده ترکیب شوند. OOCSS جایگزین خوبی برای @extend است زمانی که نیاز به ایجاد یک پایگاه کد CSS بسیار ماژولار و قابل نگهداری دارید.

دو اصل اصلی OOCSS عبارتند از:

• جداسازی ساختار از ظاهر: ساختار، اندازه، موقعیت و سایر ویژگی‌های ساختاری عنصر را تعریف می‌کند. ظاهر، نمای بصری عنصر مانند رنگ‌ها، فونت‌ها و حاشیه‌ها را تعریف می‌کند.
• جداسازی کانتینر از محتوا: کانتینر، طرح‌بندی و موقعیت عنصر را در کانتینر والد خود تعریف می‌کند. محتوا، محتوای خاص و استایل‌بندی عنصر را تعریف می‌کند.

۴. بلوک، عنصر، اصلاح‌کننده (BEM)

BEM یک قرارداد نامگذاری و متدولوژی برای نوشتن کلاس‌های CSS است که CSS شما را ماژولارتر و قابل نگهداری‌تر می‌کند. BEM مخفف Block, Element, Modifier است. BEM جایگزین خوبی برای @extend است زمانی که نیاز به ایجاد یک پایگاه کد CSS بسیار سازمان‌یافته و مقیاس‌پذیر دارید.

• بلوک (Block): یک موجودیت مستقل که به خودی خود معنادار است (مثلاً .button).
• عنصر (Element): بخشی از یک بلوک که معنای مستقلی ندارد و به طور معنایی به بلوک خود وابسته است (مثلاً .button__text).
• اصلاح‌کننده (Modifier): یک پرچم روی یک بلوک یا عنصر که ظاهر یا رفتار آن را تغییر می‌دهد (مثلاً .button--primary).

مثال‌های واقعی

بیایید به چند مثال واقعی از نحوه استفاده مؤثر از @extend نگاهی بیندازیم:

۱. استایل‌های دکمه

همانطور که قبلاً ذکر شد، @extend یک انتخاب عالی برای مدیریت استایل‌های دکمه است. می‌توانید یک استایل پایه دکمه تعریف کرده و سپس آن را برای انواع مختلف دکمه توسعه دهید:

            .button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.button--primary {
  @extend .button;
  background-color: #007bff;
  color: #fff;
}

.button--secondary {
  @extend .button;
  background-color: #6c757d;
  color: #fff;
}

            

              
                Copy
              
            
          

۲. عناصر فرم

می‌توانید از @extend برای مدیریت استایل‌های عناصر فرم استفاده کنید:

            .form-control {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.form-control--error {
  @extend .form-control;
  border-color: red;
}

            

              
                Copy
              
            
          

۳. پیام‌های هشدار

پیام‌های هشدار نیز کاندیدای خوبی برای @extend هستند:

            .alert {
  padding: 15px;
  border: 1px solid transparent;
  border-radius: 5px;
}

.alert--success {
  @extend .alert;
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.alert--danger {
  @extend .alert;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

            

              
                Copy
              
            
          

ملاحظات جهانی

هنگام استفاده از @extend در پروژه‌های جهانی، موارد زیر را در نظر بگیرید:

• بومی‌سازی (Localization): مراقب باشید که استایل‌های شما چگونه تحت تأثیر زبان‌ها و مجموعه کاراکترهای مختلف قرار می‌گیرند. اطمینان حاصل کنید که CSS شما به اندازه کافی انعطاف‌پذیر است تا طول متن‌ها و طرح‌بندی‌های مختلف را در خود جای دهد. به عنوان مثال، متن دکمه ممکن است در برخی زبان‌ها به طور قابل توجهی طولانی‌تر باشد.
• دسترسی‌پذیری (Accessibility): اطمینان حاصل کنید که استفاده شما از @extend تأثیر منفی بر دسترسی‌پذیری ندارد. به عنوان مثال، از پنهان کردن محتوایی که برای صفحه‌خوان‌ها ضروری است با استفاده از CSS خودداری کنید.
• عملکرد (Performance): عملکرد CSS خود را در مرورگرها و دستگاه‌های مختلف تست کنید. از استفاده از انتخابگرها یا استایل‌های بیش از حد پیچیده که می‌توانند رندر صفحه را کند کنند، خودداری کنید.
• سیستم‌های طراحی (Design Systems): اگر روی یک پروژه بزرگ و جهانی کار می‌کنید، استفاده از یک سیستم طراحی را برای اطمینان از ثبات در تمام محصولات و پلتفرم‌های خود در نظر بگیرید. @extend می‌تواند ابزار ارزشمندی برای پیاده‌سازی یک سیستم طراحی در CSS باشد.
• پشتیبانی از RTL: هنگام ساخت برای زبان‌هایی که از راست به چپ (RTL) خوانده می‌شوند، اطمینان حاصل کنید که استایل‌های شما به درستی تطبیق می‌یابند. در صورت امکان، به جای `margin-left` و `margin-right` از ویژگی‌های منطقی مانند `margin-inline-start` و `margin-inline-end` استفاده کنید.

نتیجه‌گیری

قانون @extend در CSS ابزاری قدرتمند برای نوشتن CSS کارآمد و قابل نگهداری است. با درک سینتکس، مزایا و معایب آن، می‌توانید از آن به طور مؤثر برای کاهش تکرار کد، بهبود قابلیت نگهداری و افزایش ثبات در شیوه‌نامه‌های خود استفاده کنید. با این حال، مهم است که از @extend با احتیاط استفاده کنید و از دام‌های بالقوه آن آگاه باشید. در مواقع مناسب، رویکردهای جایگزین مانند mixinها، کلاس‌های کاربردی و OOCSS را در نظر بگیرید. با دنبال کردن بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید بر قانون @extend مسلط شوید و CSSی بنویسید که هم زیبا و هم مؤثر باشد. به یاد داشته باشید که کد خود را به طور کامل تست کنید و استفاده خود از @extend را مستند کنید تا اطمینان حاصل کنید که CSS شما در طول زمان به راحتی قابل درک و نگهداری است.